import { CodeSurfer, CodeSurferColumns, Step } from "code-surfer";
import { nightOwl, github, oceanicNext, vsDark } from "@code-surfer/themes";

<CodeSurfer>

```foo
bar
```

</CodeSurfer>

---

<CodeSurfer>

```
bar
```

</CodeSurfer>

---

<CodeSurfer>
  
```js
console.log(1);
```

```js
console.log(1);
```

</CodeSurfer>

---

<CodeSurfer>

```js title="Empty Step"
```

</CodeSurfer>

---

<CodeSurfer>

</CodeSurfer>

---

<CodeSurfer>

# No code

</CodeSurfer>

---

<CodeSurfer>```js // no empty lines ```</CodeSurfer>

---

<CodeSurferColumns>

</CodeSurferColumns>

---

<CodeSurferColumns>

<Step>

</Step>

</CodeSurferColumns>

---

<CodeSurferColumns>

<Step>
  
```js 
console.log(1)
```

Foo

<h1 />

```js
console.log(2);
```

</Step>

</CodeSurferColumns>
